<template>
    <div class="main">
            <Echart id="leftCenter" :options="options" class="left_center_inner" v-if="pageflag" ref="charts" />
    </div>
</template>

<script>
export default {
    props: ['childMessage'],
    data() {
        return {
            pageflag: true,
            options: {
                // backgroundColor: "#000",
                tooltip: {
                    trigger: "axis",
                    axisPointer: {
                        type: "shadow",
                    },
                    formatter: function (item) {
                        return (
                            item[0].axisValueLabel +
                            "<br />" +
                            item[0].seriesName +
                            ": " +
                            item[0].data
                        );
                    },
                },
                grid: {
                    top: 20,
                    left: 120,
                    right: 5,
                    bottom: 40,
                },
                xAxis: [
                    {
                        data: ["常设浏览", "临时浏览", "数字展厅"],
                        axisLine: {
                            show: false, // 去掉 x 轴的线
                            lineStyle: {
                                color: "#FFFFFF",
                            },
                        },
                        axisTick: {
                            show: false,
                        },
                        axisLabel: {
                            color: "#FFFFFF",
                            fontSize: 12,
                            interval: 0,
                        },
                    },
                    {
                        type: "category",
                        show: true,
                        axisLine: {
                            show: false,
                        },
                        axisTick: {
                            show: false,
                        },
                        axisLabel: {
                            interval: 0,
                            margin: 10,
                            color: "#fff",
                            fontSize: "10",
                        },
                        // data: [120, 100, 150],
                    },
                ],
                yAxis: [
                    {
                        //scale:true,
                        // min: function(item){
                        // 	return parseInt(item.min / 10) * 10
                        // },
                        // max: 200,
                        axisTick: {
                            show: false,
                        },
                        axisLine: {
                            show: false,
                            lineStyle: {
                                color: "#FFFFFF",
                            },
                        },
                        axisLabel: {
                            textStyle: {
                                color: "#FFFFFF",
                            },
                            // formatter: function(value){
                            //   return parseInt(value * 100) + '%'
                            // },
                        },
                        splitLine: {
                            show: true, // 显示 y 轴的背景横线
                            lineStyle: {
                                color: "rgba(255, 255, 255, 0.1)", // 设置颜色为白色，并设置透明度为 0.5
                                type: "solid", // 设置为实线
                            },
                        },
                    },
                ],
                series: [
                    {
                        name: "数量",
                        type: "pictorialBar",
                        symbol: "rect",
                        itemStyle: {
                            // color: "#10bffc",
                            normal: {
                                color: function (params) {
                                    // 根据数据项的索引来设置颜色
                                    var colors = ["#8ebfe6", "#eebe7e", "#cee1f0"]; // 自定义颜色数组
                                    return colors[params.dataIndex];
                                },
                                label: {
                                    formatter: "{c}",
                                    show: true,
                                    position: "top",
                                    textStyle: {
                                        // fontWeight: "bolder",
                                        fontSize: "10",
                                        color: "rgba(255, 255, 255, 0.5)"
                                    }
                                },
                            }
                        },
                        symbolRepeat: true,
                        symbolSize: [19, 6],
                        // symbolBoundingData: 100,
                        symbolMargin: 0.5,
                        symbolPosition: "start",
                        z: -20,
                        // data: [120, 100, 150],
                        // label: {
                        //     normal: {
                        //         show: true,
                        //         position: "top",
                        //         verticalAlign: "top",
                        //         formatter: function(value){
                        //           return value && (value.data * 100).toFixed(1) + '%'
                        //         }
                        //     },
                        // },
                    },
                    {
                        name: "",
                        type: "bar",
                        barWidth: 19,
                        itemStyle: {
                            // color: "rgba(0,0,0,0)",
                            // borderWidth: 2,
                            // borderColor: "#10bffc",
                            // padding: 0,
                            normal: {
                                color: function(params) {
                                    // 根据数据项的索引来设置颜色
                                    var colors = ["rgba(142, 191, 230, 0.5)", "rgba(238, 190, 126, 0.5)", "rgba(206, 225, 240, 0.5)"];
                                    return colors[params.dataIndex];
                                }
                            }
                        },
                        label: {
                            show: false,
                        },
                        z: -30,
                        // data: [200, 200, 200, 200, 200, 200, 200],
                    },
                    // {
                    //     name: "",
                    //     type: "line",
                    //     // barWidth: 19,
                    //     symbol:
                    //         "image://",
                    //     symbolSize: [14, 6],
                    //     symbolOffset: [0, "-70%"],
                    //     itemStyle: {
                    //         color: "rgba(0,0,0,0)",
                    //         borderWidth: 2,
                    //         borderColor: "#10bffc",
                    //         padding: 0,
                    //     },
                    //     hoverAnimation: false,
                    //     legendHoverLink: false,
                    //     z: -10,
                    //     data: [200, 200, 200, 200, 200, 200, 200],
                    // },
                ],
            },
        };
    },
    created() {
    },
    mounted() {
        this.$nextTick(() => {
            this.options.xAxis[0].data = [];
            this.options.series[0].data = [];
            this.options.series[1].data = [];
            this.childMessage.forEach((item, index) => {
                this.options.xAxis[0].data.push(item.name);
                this.options.series[0].data.push(item.valule);
            })

            // 获取数组中的最大值
            const max = Math.max(...this.options.series[0].data);
            this.options.series[0].data.forEach(num => {
                this.options.series[1].data.push((max % 10 + 1) * 10)
            });
        });
    },
    beforeDestroy() {

    },
    methods: {},
};
</script>
<style lang='scss' scoped>
.main {
  width: 100%;
  height: 280px;
  display: flex;
  flex-wrap: wrap;
}
</style>
